import {AlipayOutlined, DingdingOutlined, SyncOutlined, TaobaoOutlined, WechatOutlined} from '@ant-design/icons';
import {Button, List, message, Modal, Popconfirm} from 'antd';
import React, {Fragment, useState} from 'react';
import {accountBind, bindWechat, deleteBind} from "@/pages/Account/Settings/service";
import {useRequest} from "@@/plugin-request/request";
import {queryAbApplyList} from "@/pages/Ab/Apply/service";
import {scanLogin, scanResult} from "@/services/ant-design-pro/api";
import {history} from "@@/core/history";

const BindingView: React.FC = () => {


  const {
    data: listData,
    loading,
    mutate,
  } = useRequest(() => {
    return accountBind();
  });
  let list = listData || {wechat: ''};
  const getData = () => {

    if (list.wechat) {
      console.log(list.wechat, "333333313333")
      return [{
        title: '绑定微信',
        description: `已绑定：${list.wechat.name}`,
        actions: [<Popconfirm
          key="delete"
          title={`确认要解除微信绑定账号?`}
          okButtonProps={{danger: true}}
          onConfirm={() => {
            deleteItem(list.wechat.key)
          }}
          okText="解除绑定"
          cancelText="取消"
        >
          <a key="Delete" style={{color: "red"}}>解除</a>
        </Popconfirm>,
          <a key="Bind" onClick={loadScanData}>重新绑定</a>],
        avatar: <WechatOutlined className="wechat"/>,
      }];
    } else {
      return [{
        title: '绑定微信',
        description: '当前未绑定微信账号',
        actions: [<a key="Bind" onClick={loadScanData}>绑定</a>],
        avatar: <WechatOutlined className="wechat"/>,
      }];
    }

    // return
    // [
    // {
    //   title: '绑定微信',
    //   description: '当前未绑定微信账号',
    //   actions: [<a key="Bind">绑定</a>],
    //   avatar: <WechatOutlined className="wechat"/>,
    // },
    // {
    //   title: '绑定支付宝',
    //   description: '当前未绑定支付宝账号',
    //   actions: [<a key="Bind">绑定</a>],
    //   avatar: <AlipayOutlined className="alipay" />,
    // },
    // {
    //   title: '绑定钉钉',
    //   description: '当前未绑定钉钉账号',
    //   actions: [<a key="Bind">绑定</a>],
    //   avatar: <DingdingOutlined className="dingding" />,
    // },
    // ]
  };
  const [showScanLogin, setShowScanLogin] = useState<boolean>(false);
  const [scanQrCode, setScanQrCode] = useState<String>();
  const [scanKey, setScanKey] = useState<String>();

  const [count, setCount]: [number, any] = useState(0);
  let interval: number | undefined;
  const loadScanData = async () => {
    let data = await bindWechat();
    console.log(data);
    setScanQrCode(data.data);
    setShowScanLogin(true);
  };
  const deleteItem = (id: any) => {
    postRun('remove', id);
  };
  const {run: postRun} = useRequest(
    (method, params) => {
      if (method === 'remove') {
        return deleteBind(params);
      }
    },
    {
      manual: true,
      onSuccess: (result) => {
        mutate(result);
      },
    },
  );


  return (
    <Fragment>


      <Modal visible={showScanLogin} onCancel={() => {
        setShowScanLogin(false)
      }} destroyOnClose={true} maskClosable={false} title={'绑定微信'} footer={null}
             width={"500px"}>
        <div style={{textAlign: 'center', paddingBottom: '50px'}}>
          <img src={scanQrCode} alt="扫码登录" style={{width: '300px'}} onClick={loadScanData}/>
          <div>请使用微信扫码</div>
        </div>
      </Modal>
      <List
        loading={loading}
        itemLayout="horizontal"
        dataSource={getData()}
        renderItem={(item) => (
          <List.Item actions={item.actions}>
            <List.Item.Meta
              avatar={item.avatar}
              title={item.title}
              description={item.description}
            />
          </List.Item>
        )}
      />
    </Fragment>
  );
};

export default BindingView;
